<template>
    <div style="text-align:center;margin-top:150px">
        <div style="font-size:25px;color:blue">高校二级学院学生学业预警系统</div>
        <el-form :model="info" :inline="true">
            <div style="margin-top:30px; ;height:10px">
                <el-select v-model="info.identity" placeholder="请选择登录用户类型" clearable>
                    <el-option label="辅导员" value="2" />
                    <el-option label="管理员" value="1" />
                    <el-option label="学生" value="3" />
                </el-select>
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入账号" :prefix-icon="User" type="text" v-model="info.username"/>
                </div>
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-input placeholder="请输入密码" :prefix-icon="Lock" type="password" v-model="info.password"/>
                </div>
                <div style="margin-top:30px; width:220px; margin-left:90px">
                    <el-row>
                        <el-col :span="12" style="text-align:left">
                            <el-image :src=info.imageUrl @click.native="reload()"/>
                        </el-col>
                        <el-col :span="12" style="text-align:right">
                            <el-input placeholder="验证码" :prefix-icon="EditPen" type="text" v-model="info.code"/>
                        </el-col>
                    </el-row>
                </div>
                <el-row>
                    <el-col :span="12" style="text-align:left">
                        <el-checkbox label="记住我" v-model="info.remember"></el-checkbox>
                    </el-col>
                    <el-col :span="12" style="text-align:right">
                        <el-link @click="router.push('/emailLogin')">忘记密码？</el-link>
                    </el-col>
                </el-row>
                <div>
                    <el-row>
                        <el-button type="primary" style="width:100px;margin-left:90px;margin-top:30px" @click="router.push('/register')">注册</el-button>
                        <el-button type="success" style="width:100px;margin-left:30px;margin-top:30px" @click="login()">登录</el-button>
                    </el-row>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script setup>
import { reactive } from 'vue'
import {User,Lock,EditPen} from '@element-plus/icons-vue'
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import router from '@/router'
import {userStore} from '@/stores/counter.js'

const store=userStore()
const info = reactive({
  username: '',
  identity: '',
  password: '',
  code: '',
  remember:false,
  imageUrl:'http://localhost:8080/verify'
})
const login=()=>{
if(!info.username||!info.password||!info.code){
ElMessage.warning('请输入用户名或密码或验证码')
}else{
post('/api/auth/login',{
  username: info.username,
  password: info.password,
  code: info.code,
  identity:info.identity,
  remember:info.remember
},(message)=>{
ElMessage.success(message)
get('/getUser',(message)=>{
if(message.role=='1'){
    store.auth.role='管理员'
    }else if(message.role=='2'){
    store.auth.role='辅导员'
    }else {
    store.auth.role='学生'
    }
store.auth.user=message.name
router.push('/index')
},(message)=>{
store.auth.user=null
})
},(data)=>{
ElMessage.warning(data)
})
}
}

const reload=()=>{
info.imageUrl="http://localhost:8080/verify?" + new Date().getTime();
}

</script>
<style scoped>
.el-message__content {
  font-size: 50px;
}
</style>